<template>
  <div class="engine">
    <canvas v-show="canvasVisible" id="canvas" ref="canvasRef" class="canvas-box" oncontextmenu="event.preventDefault()"
      tabindex="1"></canvas>

    <el-progress type="circle" style="position: absolute" :percentage="percentageValue"
      v-show="showPercentage"></el-progress>
  </div>
</template>
<script lang="ts" setup>
// import { ref, onMounted, onUnmounted } from "vue"
import { closeUIPanel } from "@/utils/utils";
import { getElementParamData,getElementsByParamsPaging } from "@/http/api_hd"

const props = defineProps({
  modelInfo: {
    type: Object,
    default: {}
  }
})





const canvasRef = ref<HTMLCanvasElement>();
const percentageValue = ref<number>(0);
const showPercentage = ref<boolean>(true);
const canvasVisible = ref<boolean>(true);

// const modelInfo = [{
//   dataSetId: '3a1480cfe471435b110154a86707fb2c',
//   resourcesAddress: 'https://engine3.bjblackhole.com/engineweb/api/autoconvert/EngineRes/RequestEngineRes?dir=url_res05&path=3a1480cfe471435b110154a86707fb2c'
// }]
// // 如果有登录框，这里需要根据自己需求调整接口


// 初始化给BlackHole3D赋值
function initEngine() {
  window.BlackHole3D = window.BlackHole3D ? window.BlackHole3D : {};
  window.BlackHole3D["canvas"] = canvasRef.value;

  if (typeof window.BlackHole3D.RealBIMWeb === "undefined") {
    window.BlackHole3D = window.CreateBlackHoleWebSDK(window.BlackHole3D);
  }
  window.BlackHole3D.m_re_em_window_width = window.innerWidth;
  window.BlackHole3D.m_re_em_window_height = window.innerHeight;
}
// 监听模型加载
function addListener() {
  document.addEventListener("RESystemReady", RESystemReady); //系统初始化监听
  document.addEventListener("RESystemEngineCreated", (e) =>
    RESystemEngineCreated(e)
  ); //场景初始化监听
  document.addEventListener("REDataSetLoadProgress", (e) =>
    REDataSetLoadProgress(e)
  ); //模型加载进度监听
  window.addEventListener("resize", onResize);
}

function onResize() {
  window.BlackHole3D.m_re_em_window_width = window.innerWidth;
  window.BlackHole3D.m_re_em_window_height = window.innerHeight;
}
function RESystemReady() {
  var sysInfo = new window.BlackHole3D.RESysInfo();
  sysInfo.workerjsPath = "/js/RealBIMWeb_Worker.js";
  // sysInfo.workerjsPath = "http://47.106.151.2/qzs/js/RealBIMWeb_Worker.js";
  
  sysInfo.renderWidth = window.innerWidth;
  sysInfo.renderHieght = window.innerHeight;
  sysInfo.userName = "";
  sysInfo.passWord = "";
  window.BlackHole3D.initEngineSys(sysInfo);
  window.BlackHole3D.Common.setUseWebCache(true); //是否允许使用浏览器缓存
}
function RESystemEngineCreated(e: any) {
  const isSuccess = e.detail.succeed;
  if (isSuccess) {
    // window.BlackHole3D.Model.loadDataSet(modelInfo, true);
    window.BlackHole3D.Model.loadDataSet(props.modelInfo, true);
    window.BlackHole3D.Common.setMaxResMemMB(5500);
    window.BlackHole3D.Common.setExpectMaxInstMemMB(4500);
    window.BlackHole3D.Common.setExpectMaxInstDrawFaceNum(20000000);
    window.BlackHole3D.Common.setPageLoadLev(2);
  } else {
    console.log("===========================  场景初始化 --> 失败！！！");
  }
}

// 监听模型加载进度
function REDataSetLoadProgress(e: any) {
  showPercentage.value = true;
  if (e.detail.progress === 100) {
    showPercentage.value = false;
    canvasVisible.value = true;

    //禁用天空盒
    window.BlackHole3D.SkyBox.setEnable(false);
    //设置天空盒背景色
    window.BlackHole3D.SkyBox.setBackClr(new window.BlackHole3D.REColor(4,24,35));
    // setSky();
    // window.BlackHole3D.SkyBox.setBackClr(new window.BlackHole3D.REColor(5,24,31));
    // window.BlackHole3D.BIM.setElemAlpha("3a1480cfe471435b110154a86707fb2c",[],100);
    // window.BlackHole3D.BIM.setContourLineClr("3a1480cfe471435b110154a86707fb2c", new window.BlackHole3D.REColor(0,227,254, 255));

    // addAnchor();
    window.BlackHole3D.Common.setShadowState(true);
    window.BlackHole3D.Common.setAOState(true);
    
    // searchAttribute()///按属性搜索构件,并隐藏其他构件
  } else {
    canvasVisible.value = false;
    showPercentage.value = true;
  }
  percentageValue.value = e.detail.progress;
  closeUIPanel();//隐藏UI(左上,右上,底部)

}

// //按属性搜索构件,并隐藏其他构件
// function searchAttribute(){
//   let params = {"dataSetId":"3a14f24c-3469-a082-af16-5edffde64c55",
//   "skipCount":0,
//   "elemName":"",
//   "elemNamePredicate":1,
//   "elemBehaviour":0,
//   "params":[{"paramName":"所属系统","paramValue":"汽机润滑油系统","paramValuePredicate":0}],
//   "maxResultCount":99999999}
//   getElementsByParamsPaging(params).then((res:any)=>{
//     let elemIdList:any[] = [];
//     res.items?.forEach((item:any) => {
//       elemIdList.push(item.elemId);
     
//     });
//     console.log('129',elemIdList);
    
//     // 先隐藏所有id集合
//     window.BlackHole3D.BIM.setElemsValidState("", [], false);
//     // 再显示指定id集合
//     window.BlackHole3D.BIM.setElemsValidState("3a14f25a6aabe0e2fafd9bbd1fea26ac", elemIdList, true);
//   })  
// }

//设置天空盒
function setSky() {
  window.BlackHole3D.SkyBox.setSkyAtmActive(false)
  var skyInfo = new window.BlackHole3D.RESkyInfo();
  skyInfo.skyTexPaths = [
    "https://demo.bjblackhole.com/demopage/examplesImgs/skybox/01/skybox_px.jpg",
    "https://demo.bjblackhole.com/demopage/examplesImgs/skybox/01/skybox_nx.jpg",
    "https://demo.bjblackhole.com/demopage/examplesImgs/skybox/01/skybox_pz.jpg",
    "https://demo.bjblackhole.com/demopage/examplesImgs/skybox/01/skybox_nz.jpg",
    "https://demo.bjblackhole.com/demopage/examplesImgs/skybox/01/skybox_py.jpg",
    "https://demo.bjblackhole.com/demopage/examplesImgs/skybox/01/skybox_ny.jpg"
  ]
  skyInfo.sunMode = 1;
  skyInfo.sunDir = [0, 0, 0];
  skyInfo.isNight = false;
  skyInfo.exposeScale = 1.0;
  window.BlackHole3D.SkyBox.setSkyInfo(skyInfo);
}

function removeListener() {
  document.removeEventListener("RESystemReady", RESystemReady); //系统初始化监听
  document.removeEventListener("RESystemEngineCreated", RESystemEngineCreated); //场景初始化监听
  document.removeEventListener("REDataSetLoadProgress", REDataSetLoadProgress); //模型加载进度监听
  
}

onMounted(() => {
  addListener();
  initEngine();
});
onUnmounted(() => {
  window.BlackHole3D = undefined;
  removeListener();
});

// //添加监听事件
// document.addEventListener("RESystemSelElement", RESystemSelElement);

// //获取当前探测结果
// function RESystemSelElement() {
//   console.log('144', window.BlackHole3D.Probe.getCurProbeRet());
//   let newEle = window.BlackHole3D.Probe.getCurProbeRet()?.elemId || null;
//   if (newEle) {
//     // 请求接口
//     const dataSetId = "3a14f24c-3469-a082-af16-5edffde64c55";
//     let params = {
//       childNodeId: newEle,
//       dataSetId,
//     }
//     //按构件Id查询属性
//     getElementParamData(params).then((res: any) => {
//       console.log('160',res);
//     })
//   }
// }

//设置指定构件样式
  function addAnchor() {
    //将3a14f25a6aabe0e2fafd9bbd1fea26ac数据集全部透明。
    var elemAttr1 = new window.BlackHole3D.REElemAttr();
    elemAttr1.dataSetId = "3a14f25a6aabe0e2fafd9bbd1fea26ac";
    elemAttr1.elemIdList = [];
    elemAttr1.elemClr = new window.BlackHole3D.REColor(25, 67, 137, 0);
    window.BlackHole3D.BIM.setElemAttr(elemAttr1);
    //隐藏需要展示轮廓线的构件。
    var elementidList1 = [
      13240,
      19500,
      21495,
      31410,
      37346,
      38298
    ];
    window.BlackHole3D.BIM.setElemsValidState("3a14f25a6aabe0e2fafd9bbd1fea26ac1", elementidList1, false);

    //将需要展示廓线的构件修改颜色并设置透明度和高亮。
    var elemAttr = new window.BlackHole3D.REElemAttr();
    elemAttr.dataSetId = "3a14f25a6aabe0e2fafd9bbd1fea26ac";
    elemAttr.elemIdList = [
      13240,
      19500,
      21495,
      31410,
      37346,
      38298
    ];
    elemAttr.elemClr = new window.BlackHole3D.REColor(25, 67, 137, 200);
    elemAttr.elemEmis = 90;
    elemAttr.elemEmisPercent = 90;
    window.BlackHole3D.BIM.setElemAttr(elemAttr);


    //禁用天空盒
    window.BlackHole3D.SkyBox.setEnable(false);
    //设置天空盒背景色
    window.BlackHole3D.SkyBox.setBackClr(new window.BlackHole3D.REColor(0, 0, 0));
    //设置模型轮廓线
    window.BlackHole3D.BIM.setContourLineClr("3a14f25a6aabe0e2fafd9bbd1fea26ac", new window.BlackHole3D.REColor(0, 248, 255, 255));
    //开启边缘高光效果
    window.BlackHole3D.Common.setBorderEmisEnable(true); //开启边缘高光效果
    var dataSetId = "";
    var amp = 0.5;
    var range = 1;
    window.BlackHole3D.BIM.setBorderEmis(dataSetId, amp, range); //设置边缘高光属性
    //相机适口初始定位
    var camLoc = new window.BlackHole3D.RECamLoc();
    camLoc.camPos = [
      58.48373862141851,
      -111.11680388775096,
      30.11409653311119
    ];
    camLoc.camRotate = [
      0.6411819726118434,
      -0.14089657879070466,
      -0.16190039297322664,
      0.7367646129109181
    ];
    var locDelay = 0;
    var locTime = 0;
    window.BlackHole3D.Camera.setCamLocateTo(camLoc, locDelay, locTime);
  }

</script>
<style lang="scss" scoped>
.engine {
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>